{% extends 'server/status/base.twig' %}
{% set active = 'monitor' %}
{% block content %}
  <h2 class="mb-3">{{ t('System monitor') }}</h2>

  <div class="mb-3 d-print-none">
    <button type="button" class="btn btn-primary" id="monitorPauseResumeButton">{{ get_icon('play', t('Start monitor')) }}</button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#monitorSettingsContent" aria-expanded="false" aria-controls="monitorSettingsContent">{{ get_icon('s_cog', t('Settings')) }}</button>
    <button type="button" class="btn btn-secondary" id="monitorInstructionsButton">{{ get_icon('b_help', t('Instructions/Setup')) }}</button>
  </div>

  <div class="collapse" id="monitorSettingsContent">
    <div class="card mb-3 d-print-none">
      <div class="card-body">
        <div class="mb-3">
          <button type="button" class="btn btn-secondary" id="monitorAddNewChartButton">{{ get_icon('b_chart', t('Add chart')) }}</button>
          <button type="button" class="btn btn-secondary" id="monitorRearrangeChartButton">{{ get_icon('b_tblops', t('Enable charts dragging')) }}</button>
          <button type="button" class="btn btn-primary d-none" id="monitorDoneRearrangeChartButton">{{ get_icon('s_okay', t('Done dragging (rearranging) charts')) }}</button>
        </div>

        <div class="row mb-3">
          <div class="col-auto">
            <label class="form-label" for="monitorChartRefreshRateSelect">{{ t('Refresh rate') }}</label>
            <select class="form-select" id="monitorChartRefreshRateSelect" name="monitorChartRefreshRate">
              {% for rate in [2, 3, 4, 5, 10, 20, 40, 60, 120, 300, 600, 1200] %}
                <option value="{{ rate }}"{{ rate == 5 ? ' selected' }}>
                  {%- if rate < 60 -%}
                    {{- t('%d second', '%d seconds', rate)|format(rate) -}}
                  {%- else -%}
                    {{- t('%d minute', '%d minutes', rate / 60)|format(rate / 60) -}}
                  {%- endif -%}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="col-auto">
            <label class="form-label" for="monitorChartColumnsSelect">{{ t('Chart columns') }}</label>
            <select class="form-select" id="monitorChartColumnsSelect" name="monitorChartColumns">
              {% for number_of_columns in 1..6 %}
                <option>{{ number_of_columns }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div>
          <p class="card-text">
            <strong>{{ t('Chart arrangement') }}</strong><br>
            <span class="text-body-secondary">{{ t('The arrangement of the charts is stored to the browsers local storage. You may want to export it if you have a complicated set up.') }}</span>
          </p>
          <div>
            <button type="button" class="btn btn-secondary" id="monitorImportConfigButton">{{ t('Import') }}</button>
            <button type="button" class="btn btn-secondary" id="monitorExportConfigButton">{{ t('Export') }}</button>
            <button type="button" class="btn btn-secondary" id="monitorResetConfigButton">{{ t('Reset to default') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>

<div id="monitorInstructionsDialog" title="{{ t('Monitor Instructions') }}" class="hide">
  <p>
    {{ t("The phpMyAdmin Monitor can assist you in optimizing the server configuration and track down time intensive queries. For the latter you will need to set log_output to 'TABLE' and have either the slow_query_log or general_log enabled. Note however, that the general_log produces a lot of data and increases server load by up to 15%.") }}
  </p>
  <img class="ajaxIcon" src="{{ image('ajax_clock_small.gif') }}" alt="{{ t('Loading…') }}">

  <div class="ajaxContent"></div>
  <br>

  <div class="monitorUse hide">
    <p><strong>{{ t('Using the monitor:') }}</strong></p>
    <p>
      {{ t("Your browser will refresh all displayed charts in a regular interval. You may add charts and change the refresh rate under 'Settings', or remove any chart using the cog icon on each respective chart.") }}
    </p>
    <p>
      {{ t('To display queries from the logs, click on any chart. Once confirmed, this will load a table of grouped queries, there you may click on any occurring SELECT statements to further analyze them.') }}
    </p>
    <p>
      {{ get_image('s_attention') }}
      <strong>{{ t('Please note:') }}</strong>
    </p>
    <p>
      {{ t('Enabling the general_log may increase the server load by 5-15%. Also be aware that generating statistics from the logs is a load intensive task, so it is advisable to select only a small time span and to disable the general_log and empty its table once monitoring is not required any more.') }}
    </p>
  </div>
</div>

<div class="modal fade" id="addChartModal" tabindex="-1" aria-labelledby="addChartModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addChartModalLabel">{{ t('Chart Title') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <div id="tabGridVariables">
          <p>
            <input type="text" name="chartTitle" value="{{ t('Chart Title') }}">
          </p>
          <input type="radio" name="chartType" value="preset" id="chartPreset">

          <label for="chartPreset">{{ t('Preset chart') }}</label>
          <select name="presetCharts"></select>
          <br>

          <input type="radio" name="chartType" value="variable" id="chartStatusVar" checked>
          <label for="chartStatusVar">
            {{ t('Status variable(s)') }}
          </label>
          <br>

          <div id="chartVariableSettings">
            <label for="chartSeries">{{ t('Select series:') }}</label>
            <br>
            <select id="chartSeries" name="varChartList" size="1">
              <option>{{ t('Commonly monitored') }}</option>
              <option>Processes</option>
              <option>Questions</option>
              <option>Connections</option>
              <option>Bytes_sent</option>
              <option>Bytes_received</option>
              <option>Threads_connected</option>
              <option>Created_tmp_disk_tables</option>
              <option>Handler_read_first</option>
              <option>Innodb_buffer_pool_wait_free</option>
              <option>Key_reads</option>
              <option>Open_tables</option>
              <option>Select_full_join</option>
              <option>Slow_queries</option>
            </select>
            <br>

            <label for="variableInput">
              {{ t('or type variable name:') }}
            </label>
            <input type="text" name="variableInput" id="variableInput">
            <br>

            <input type="checkbox" name="differentialValue" id="differentialValue" value="differential" checked>
            <label for="differentialValue">
              {{ t('Display as differential value') }}
            </label>
            <br>

            <input type="checkbox" id="useDivisor" name="useDivisor" value="1">
            <label for="useDivisor">{{ t('Apply a divisor') }}</label>

            <span class="divisorInput hide">
              <input type="text" name="valueDivisor" size="4" value="1">
              (<a href="#kibDivisor">{{ t('KiB') }}</a>,
              <a href="#mibDivisor">{{ t('MiB') }}</a>)
            </span>
            <br>

            <input type="checkbox" id="useUnit" name="useUnit" value="1">
            <label for="useUnit">
              {{ t('Append unit to data values') }}
            </label>
            <span class="unitInput hide">
              <input type="text" name="valueUnit" size="4" value="">
            </span>

            <p>
              <a href="#submitAddSeries">
                <strong>{{ t('Add this series') }}</strong>
              </a>
              <span id="clearSeriesLink" class="hide">
                | <a href="#submitClearSeries">{{ t('Clear series') }}</a>
              </span>
            </p>

            {{ t('Series in chart:') }}
            <br>
            <span id="seriesPreview">
              <em>{{ t('None') }}</em>
            </span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="addChartButton" data-bs-dismiss="modal">{{ t('Add chart to grid') }}</button>
        <button type="button" class="btn btn-secondary" id="closeModalButton" data-bs-dismiss="modal">{{ t('Close') }}</button>
      </div>
    </div>
  </div>
</div>

<div id="logAnalyseDialog" title="{{ t('Log statistics') }}" class="hide">
  <p>
    {{ t('Selected time range:') }}
    <input type="text" name="dateStart" class="datetimefield" value="">
    -
    <input type="text" name="dateEnd" class="datetimefield" value="">
  </p>

  <input type="checkbox" id="limitTypes" value="1" checked>
  <label for="limitTypes">
    {{ t('Only retrieve SELECT,INSERT,UPDATE and DELETE Statements') }}
  </label>
  <br>

  <input type="checkbox" id="removeVariables" value="1" checked>
  <label for="removeVariables">
    {{ t('Remove variable data in INSERT statements for better grouping') }}
  </label>

  <p>
    {{ t('Choose from which log you want the statistics to be generated from.') }}
  </p>
  <p>
    {{ t('Results are grouped by query text.') }}
  </p>
</div>

<div id="queryAnalyzerDialog" title="{{ t('Query analyzer') }}" class="overflow-y-scroll hide">
  <textarea id="sqlquery"></textarea>
  <br>
  <div class="placeHolder"></div>
</div>

<div class="clearfloat"></div>
<div><table class="clearfloat tdblock" id="chartGrid"></table></div>
<div id="logTable"><br></div>

<script>
  var variableNames = [
    {% for variable_name in javascript_variable_names %}
      "{{ variable_name|e('js') }}",
    {% endfor %}
  ];
</script>

<form id="js_data" class="hide">
  {% for name, value in form %}
    <input type="hidden" name="{{ name }}" value="{{ value }}">
  {% endfor %}
</form>

<div id="profiling_docu" class="hide">
  {{ show_mysql_docu('general-thread-states') }}
</div>

<div id="explain_docu" class="hide">
  {{ show_mysql_docu('explain-output') }}
</div>

{% endblock %}
